<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="../../static/css/bootstrap.min.css">
	<link rel="stylesheet" href="../../static/css/ylb.css">
	<link rel="shortcut icon" href="../../static/img/logo.png">
	<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../static/js/popper.min.js"></script>
	<script type="text/javascript" src="../../static/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../../static/js/qrcode.min.js"></script>
	<script type="text/javascript" src="../../static/js/clipboard.min.js"></script>
	<script type="text/javascript" src="./Carousel.js"></script>
	<script type="text/javascript">
        var timestamp = new Date().getTime();
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = './Carousel.js?v=' + timestamp;
        document.head.appendChild(script);
    </script>
    <style>
        .cz-click {
            padding: 4px 8px;
            width: 43px;
            text-align: center;
            background: #eee;
            color: #666;
            font-size: 13px;
            border-radius: 8px;
            cursor: pointer;
            margin-left: 3px;
        }
        .upload-btn-view {
            position: relative;
            background: rgba(59,94,225,0.1);
            height: 36.5px;
            border-radius: 8px;
        }
        .upload-btn-view .btn-text {
            text-align: center;
            line-height: 36.5px;
            display: block;
            color: rgb(59,94,225);
            font-size: 15px;
        }
        .upload-btn-view .file-inp {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
        .Carousel-btn {
            height: 36.5px;
        }
        .noData {
            text-align: center;
            font-size: 15px;
            color: #999;
            padding: 20px 0;
        }
        .redConfrimBtn {
            background: #f00;
            color: #fff;
        }
        .selectCarouselSPA {
            width: 17px;
            height: 17px;
            background: #eee;
            display: block;
            font-size: 12px;
            color: #eee;
            cursor: pointer;
            border-radius: 3px;
        }
        .selectedCarouselSPA {
            background: #eee;
            color: #333;
            font-weight: bold;
        }
        .carousel_scan .scanicon {
            width: 15px;
            height: 15px;
            padding: 0;
            background: url('http://p16.qhimg.com/t11a4d74fff3a42d7c244bd6494.png')no-repeat;
            background-position: center;
            background-size: 100%;
            margin-left: 8px;
        }
    </style>
</head>
<body>

<div id="app">
	
	<!-- 左侧 -->
	<div class="left">
		<div class="dhview">

			<!-- LOGO -->
			<a href="../index/" class="index">
			    <div class="logo"></div>
			</a>

			<!-- 导航 -->
			<ul>
			    <a href="../index/" >
			    <li class="nav-li">
			        <i class="icon i-data"></i>
			        <span class="nav-text">数据</span>
			    </li>
			    </a>
			    
			    <a href="../qun/">
			    <li class="nav-li">
			        <i class="icon i-hm"></i>
			        <span class="nav-text">活码</span>
			    </li>
			    </a>
			    
				<a href="../dwz/">
				<li class="nav-li">
				    <i class="icon i-dwz"></i>
				    <span class="nav-text">短网址</span>
				</li>
				</a>
				
				<a href="../tbk/" class="selected">
				<li class="nav-li">
				    <i class="icon i-tbk-dark"></i>
				    <span class="nav-text">淘宝客</span>
				</li>
				</a>
				
				<a href="../shareCard/">
				<li class="nav-li">
				    <i class="icon i-share"></i>
				    <span class="nav-text">分享卡片</span>
				</li>
				</a>
				
				<a href="../plugin/">
				<li class="nav-li">
				    <i class="icon i-plugin"></i>
				    <span class="nav-text">插件中心</span>
				</li>
				</a>
				
				<a href="../kami/">
				<li class="nav-li">
				    <i class="icon i-kami"></i>
				    <span class="nav-text">卡密分发</span>
				</li>
				</a>
				
				<a href="../config/">
				<li class="nav-li">
				    <i class="icon i-config"></i>
				    <span class="nav-text">配置中心</span>
				</li>
				</a>
				
				<a href="../sucai/">
				<li class="nav-li">
				    <i class="icon i-sucai"></i>
				    <span class="nav-text">素材管理</span>
				</li>
				</a>
				
				<a href="../user/">
				<li class="nav-li">
				    <i class="icon i-account"></i>
				    <span class="nav-text">账号管理</span>
			    </li>
			    </a>
			</ul>

			<!-- 账号 -->
			<div class="account">加载中...</div>
		    
		</div>
	</div>

	<!-- 右侧 -->
	<div id="right">
	    
		<h3>淘宝客 ➜ <span class="mbx">轮播单页</span></h3>
		<div class="data-card">
		    
			<!-- 按钮区域 -->
			<div class="button-view" id="button-view" style="display:none;">
			    
			    <!--flex布局按钮容器-->
    			<div class="flex-button-view">
    			    
    			    <!--导航-->
    			    <div class="button-daohang">
    			        <a href="./"><div class="back-lastpage"></div></a>
			            <button class="default-btn">轮播单页</button>
    			    </div>
    			    
    			    <!--功能-->
    			    <div class="button-gongneng">
    			        
    			        <button class="tint-btn" 
        				data-toggle="modal" 
        				data-target="#createSpaModal" 
        				onclick="getDomainNameList('create')" style="margin-left:5px;">创建单页</button>
        				<div class="batchDeleteCarouselSPA"></div>
        				<!--查询-->
        				<div style="width:400px;display:flex;float:right;">
        				    <input type="text" style="flex:1;" name="keywordOrKey" class="form-control" placeholder="根据短链接Key或标题查询" />
        				    <button style="width:80px;height:36.5px;margin-right:10px;" class="tint-btn checkDwz" onclick="searchCarousel()">查询</button>
        				</div>
    			    </div>
    			</div>
			</div>

			<!-- 列表区域 -->
			<div class="data-list">
				<table class="table">
				    <thead></thead>
				    <tbody></tbody>
				</table>
			</div>
			
			<!--没有数据的时候展示-->
			<p class="loading" style="display: none;"></p>
			
			<!-- 分页 -->
			<div class="fenye"></div>
			
		</div><!-- data-card -->
	</div><!-- right -->

	<!-- 创建单页 -->
    <div class="modal fade" id="createSpaModal">
        
        <div class="modal-dialog">
            <div class="modal-content" style="width:650px;">
                
                <!-- 头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">创建单页</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div><!-- modal-header -->
                
                <!-- 表单 -->
                <div class="modal-body">
                <form id="createCarouselSPA">
                    <span class="text">标题</span>
                    <input type="text" name="Carousel_title" class="form-control" autocomplete="off" placeholder="单页标题">
                    
                    <div style="width:100%;height:70px;margin: 0 auto 20px;display:flex;">
                        <div style="flex:1;margin-right:7px;">
                            <span class="text">短链域名</span>
                            <select name="Carousel_dlym" class="form-control" title="短网址所使用的域名"></select>
                        </div>
                        <div style="flex:1;margin-right:7px;">
                            <span class="text">入口域名</span>
                            <select name="Carousel_rkym" class="form-control" title="扫码或点击链接后先跳转到这个域名"></select>
                        </div>
                        <div style="flex:1;">
                            <span class="text">落地域名</span>
                            <select name="Carousel_ldym" class="form-control" title="最终展示单页使用的域名"></select>
                        </div>
                    </div>
                </form>
                </div><!-- modal-body -->
                
                <!-- 底部操作 -->
                <div class="modal-footer">
                    <div class="footer-btn">
                    <div class="faqnav" title="阅读使用指南">
                        <span class="faq">
                            <a href="../faq.php?faq=tbk" target="_blank">?</a>
                        </span>
                    </div>
                    <div class="btnnav">
                        <button type="button" class="default-btn" onclick="createCarouselSPA();">立即创建</button>
                    </div>
                </div>
                    
                </div><!-- modal-footer -->
                
                <!-- 操作反馈 -->
                <div class="result"></div>
                
            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div><!-- createSpaModal -->
    
    <!-- 编辑单页 -->
    <div class="modal fade" id="editSpaModal">
        
        <div class="modal-dialog">
            <div class="modal-content" style="width:650px;">
                
                <!-- 头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">编辑单页</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div><!-- modal-header -->
                
                <!-- 表单 -->
                <div class="modal-body">
                <form id="editCarouselSPA">
                    <span class="text">标题</span>
                    <input type="text" name="Carousel_title" class="form-control" autocomplete="off" placeholder="单页标题">
                    
                    <div style="width:100%;height:70px;margin: 0 auto 20px;display:flex;">
                        <div style="flex:1;margin-right:7px;">
                            <span class="text">短链域名</span>
                            <select name="Carousel_dlym" class="form-control" title="短网址所使用的域名"></select>
                        </div>
                        <div style="flex:1;margin-right:7px;">
                            <span class="text">入口域名</span>
                            <select name="Carousel_rkym" class="form-control" title="扫码或点击链接后先跳转到这个域名"></select>
                        </div>
                        <div style="flex:1;">
                            <span class="text">落地域名</span>
                            <select name="Carousel_ldym" class="form-control" title="最终展示单页使用的域名"></select>
                        </div>
                    </div>
                    <input type="hidden" name="Carousel_id">
                </form>
                </div><!-- modal-body -->
                
                <!-- 底部操作 -->
                <div class="modal-footer">
                    <div class="footer-btn">
                    <div class="faqnav" title="阅读使用指南">
                        <span class="faq">
                            <a href="../faq.php?faq=tbk" target="_blank">?</a>
                        </span>
                    </div>
                    <div class="btnnav">
                        <button type="button" class="default-btn" onclick="editCarouselSPA();">立即保存</button>
                    </div>
                </div>
                    
                </div><!-- modal-footer -->
                
                <!-- 操作反馈 -->
                <div class="result"></div>
                
            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div><!-- editSpaModal -->
    
    <!-- 上传轮播图 -->
    <div class="modal fade" id="uploadCarouselPicsModal">
        
        <div class="modal-dialog" style="max-width:800px;">
            <div class="modal-content">
                
                <!-- 头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">上传轮播图</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div><!-- modal-header -->
                
                <!-- 表单 -->
                <div class="modal-body">
                <form id="uploadCarouselPics" enctype="multipart/form-data">
                    
                    <!--上传-->
                    <div class="uploadView" style="display:flex;">
                        <span class="upload-btn-view" style="width:100px;">
                            <span class="btn-text">上传图片</span>
                            <input type="file" class="file-inp" name="file" accept="image/*" id="selectPic" />
                            <input type="hidden" name="pic_url" />
                            <input type="hidden" name="Carousel_id" />
                        </span>
                        <input type="text" class="form-control" name="pic_desc" style="flex:2;margin-left:10px;" placeholder="图片描述文字" />
                        <select class="form-control" name="show_copy_btn" style="width:140px;margin-left:10px;">
                            <option value="2">无需复制按钮</option>
                            <option value="1">需要复制按钮</option>
                        </select>
                        <button type="button" class="default-btn Carousel-btn" onclick="addCarouselPics()" style="margin-left:10px;">立即添加</button>
                    </div>
                    
                    <!--数据列表-->
                    <table class="table" style="margin-top:20px;">
				        <thead style="font-size:15px;">
                            <tr>
                                <th style="text-align:left;">图片</th>
                                <th>文案</th>
                                <th style="text-align:right;">操作</th>
                            </tr>
				        </thead>
				        <tbody style="font-size:15px;"></tbody>
				    </table>
				    <div class="noData">暂无数据</div>
                </form>
                </div><!-- modal-body -->
                
                <!-- 底部操作 -->
                <div class="modal-footer">
                    <div class="footer-btn">
                    <div class="faqnav" title="阅读使用指南">
                        <span class="faq">
                            <a href="../faq.php?faq=tbk" target="_blank">?</a>
                        </span>
                    </div>
                    <div class="btnnav"></div>
                </div>
                    
                </div><!-- modal-footer -->
                
                <!-- 操作反馈 -->
                <div class="result"></div>
                
            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div><!-- uploadCarouselPicsModal -->
    
    <!--素材库-->
    <div class="modal fade" id="suCaiKu">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                
                <!-- 头部 -->
                <div class="modal-header" title="点击右上角&times;可返回二维码列表">
                    <h4 class="modal-title">素材库</h4>
                    <span class="hideSuCaiPannel_closeIcon"></span>
                </div>
                
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <div class="sucai-upload">
                        <button type="button" class="default-btn upload_sucai_button">
                            <span>上传素材</span>
                            <form id="uploadSuCaiTosuCaiKuForm" enctype="multipart/form-data">
                                <input type="file" name="file" class="upload_sucai" accept="image/*" id="uploadSuCaiTosuCaiKu" />
                                <input text="text" id="uploadSuCai_fromPannel" value="createSpaModal" style="display:none;" />
                            </form>
                        </button>
                    </div>
                    
                    <!--素材容器-->
                    <div class="sucai-view"></div>
                    
                    <!--分页-->
                    <div class="fenye"></div>
                </div>
                
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <div class="footer-btn">
                    	<div class="faqnav" title="阅读使用指南">
                    	    <span class="faq"><a href="../faq.php?faq=tbk" target="_blank">?</a></span>
                    	</div>
                    	<div class="btnnav">
                    	    <button type="button" class="default-btn" 
                    	    data-dismiss="modal" 
                    	    onclick="hideSuCaiPannel('createSpaModal')">取消</button>
                    	</div>
                    </div>
                </div>
                
                <!-- 操作反馈 -->
                <div class="result"></div>
                
            </div>
        </div>
    </div><!-- suCaiKu -->
  	
  	<!-- 删除单页 -->
    <div class="modal fade" id="delCarouselConfirmModal">
        
        <div class="modal-dialog">
            <div class="modal-content">
                
                <!-- 头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">删除单页</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div><!-- modal-header -->
                
                <!-- 内容 -->
                <div class="modal-body">
                    将会删除该单页！删除后无法恢复。
                </div><!-- modal-body -->
                
                <!-- 底部操作 -->
                <div class="modal-footer"></div><!-- modal-footer -->
                
                <!-- 操作反馈 -->
                <div class="result"></div>
                
            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div><!-- delCarouselConfirmModal -->
    
    <!-- 全局信息提示框 -->
    <div id="notification">
        <div id="notification-text"></div>
    </div>

</div><!-- app -->
<script>

    // 上传
    $("#selectPic").change(function(e){
        
        var fileSelect = e.target.files;
        if(fileSelect.length>0){
            
            var imageData = new FormData(document.getElementById("uploadCarouselPics"));
            $.ajax({
                url:"../upload.php",
                type:"POST",
                data:imageData,
                cache: false,
                processData: false,
                contentType: false,
                success: function(res) {
                    
                    if(res.code == 200){
                        
                        // 上传成功
                        if(res.code == 200) {
                            
                            // 将图片地址填写到表单
                            $('#uploadCarouselPicsModal input[name="pic_url"]').val(res.url);
                            
                            // 修改上传按钮文字
                            $('#uploadCarouselPicsModal .upload-btn-view .btn-text').text('已上传');
                        }
                    }else{
                        
                        // 上传失败
                        showErrorResult(res.msg)
                    }
                    
                },
                error: function() {
                    
                    // 上传失败
                    showErrorResult('服务器发生错误！')
                },
                beforeSend: function() {
                    
                    // loadding
                    $('#uploadCarouselPicsModal .upload-btn-view .btn-text').text('上传中...');
                }
            })
        }
    })
</script>
</body>
</html>